<template>
  <div class="details">
    <div class="middle">
      <div class="left">
        <div class="titleimgs">
          <img src="../../assets/global-img/pexels-fauxels.png" alt="" />
        </div>
        <div class="titleimgs">
          <img src="../../assets/global-img/pexels-fauxels.png" alt="" />
        </div>
        <div class="titleimgs">
          <img src="../../assets/global-img/pexels-fauxels.png" alt="" />
        </div>
        <div class="titleimgs">
          <img src="../../assets/global-img/pexels-fauxels.png" alt="" />
        </div>
      </div>
      <div class="right">
        <h2>XXXXASDJALKDJALKSDJL</h2>
        <p>
          地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢掌握着主动权地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢掌地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢掌握着主动权地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢地战胜俄。面对老对手
          俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢掌地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢掌握着主动权地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权地战胜俄。面排一直牢牢掌
        </p>

        <div class="fentype">
          <p>归属业务: <span>觅食互动</span></p>
          <p>业务类型: <span>只能视频生产</span></p>
          <p>技术应用: <span>XXXADHASJDH配置</span></p>
        </div>
        <i></i>
        <div class="share">
          <p>分享到平台</p>
          <a href="">
            <img src="../../assets/global-img/weixin-colour.svg" alt="" />
          </a>
          <a href="">
            <img
              src="../../assets/global-img/WechatMoments-colour.svg"
              alt=""
            />
          </a>
          <a href="">
            <img src="../../assets/global-img/weibo-colour.svg" alt="" />
          </a>
          <a href="">
            <img src="../../assets/global-img/QQ-colour.svg" alt="" />
          </a>
        </div>
      </div>
    </div>
    <div class="turn">
      <div class="mid flclear">
        <p><i></i><i></i><i></i></p>
        <div class="fl-left">
          <h3>上一个</h3>
          <div class="flclear">
            <div class="xi">
              <p><img src="../../assets/global-img/rightico.svg" alt="" /></p>
              <img src="../../assets/global-img/pexels.png" alt="" />
            </div>
            <div class="cont">
              <h1><a href="">弥撒登记卡ASKJDAKDJ简单ui</a></h1>
              <p><span>归属业务</span> / <span>项目类型</span></p>
            </div>
          </div>
        </div>
        <div class="fl-right">
          <h3>上一个</h3>
          <div>
            <div class="cont">
              <h1><a href="">弥撒登记卡ASKJDAKDJ简单ui</a></h1>
              <p><span>归属业务</span> / <span>项目类型</span></p>
            </div>
            <div class="xi">
              <img src="../../assets/global-img/pexels.png" alt="" />
              <p><img src="../../assets/global-img/rightico.svg" alt="" /></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {

  },
  mounted() {
    var _this = this;


    //右边跟随屏幕高度移动
    (function () {
      let dom = $('.right');
      let domhei = dom.height(); //元素高度
      let parhei = dom.parent().height();//父级元素的高度
      let domtop = dom.offset().top - 150;
      let minhei = parhei - domhei + domtop;
      console.log(minhei)
      let wintop;
      $(window).scroll(function (e) {
        wintop = $(window).scrollTop();
        if (wintop > minhei) {
          return
        }
        if (wintop > domtop) {
          dom.css({ 'top': wintop - domtop + 'px' })
        } else {
          dom.css({ 'top': 0 })
        }
      })
    })()

  }
}
</script>

<style scoped lang="scss">
.details {
  width: 100%;
  height: auto;

  .middle {
    position: relative;
    margin: 0 auto;
    width: 1530px;
    min-height: 750px;
    margin-top: 55px;
    .left {
      width: 900px;
      text-align: center;
      .titleimgs {
        width: 100%;
        height: 510px;
        margin-bottom: 45px;
        border-radius: 5px;
        overflow: hidden;
        img {
          width: 100%;
        }
      }
    }
    .right {
      width: 580px;
      height: auto;
      position: absolute;
      right: 0;
      top: 0;
      h2 {
        font-size: 22px;
        font-weight: 600;
        color: #000000;
        line-height: 35px;
        margin-bottom: 37px;
      }
      > p {
        width: 100%;
        font-size: 16px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.75);
        line-height: 35px;
        margin-bottom: 56px;
      }
      i {
        margin-top: 10px;
        width: 32px;
        height: 4px;
        background: #116dfa;
        display: block;
      }
      .fentype {
        p {
          font-size: 16px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.75);
          line-height: 35px;
          span {
            color: #898989;
            font-weight: 500;
          }
        }
      }
      .share {
        p {
          font-size: 16px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.75);
          line-height: 35px;
          margin-bottom: 15px;
        }
        a {
          display: inline-block;
          margin-right: 23px;
          img {
            width: 25px;
            height: 20px;
          }
        }
      }
    }
  }
  .turn {
    width: 100%;
    height: 280px;
    background: #fff;
    margin-top: 88px;
    border-top: 1px solid #dadada;
    padding: 30px 0;
    box-sizing: border-box;
    position: relative;
    .mid {
      width: 1530px;
      margin: 0 auto;
      > p {
        // display: none;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%);
        i {
          display: inline-block;
          width: 10px;
          height: 10px;
          background: #0054f7;
          border-radius: 50%;
          margin: 0 7px;
        }
      }
      .fl-left,
      .fl-right {
        float: left;
        h3 {
          height: 35px;
          font-size: 18px;
          font-weight: 600;
          color: rgba(0, 0, 0, 0.75);
          line-height: 35px;
          margin-bottom: 14px;
        }
        h1 {
          a {
            font-size: 22px;
            font-weight: 600;
            color: rgba(0, 0, 0, 0.75);
            line-height: 35px;
          }
        }
        > div {
          height: 140px;
          .xi {
            width: auto;
            height: 100%;
            vertical-align: middle;
            border-radius: 10px;
            overflow: hidden;
            float: left;
            p {
              display: inline-block;
              vertical-align: top;
              height: 100%;
              width: 0;
              // width: 35px;
              line-height: 140px;
              box-sizing: border-box;
              background: #0054f7;
              text-align: center;
              transition: all 0.5s;
              img {
                width: 7px;
                height: 10px;
                transform: rotate(180deg);
                z-index: 5;
                position: relative;
              }
            }
            > img {
              height: 100%;
              width: 130px;
              vertical-align: middle;
              position: relative;
              z-index: 10;
            }
          }
          .cont {
            float: left;
            margin-top: 28px;
            margin-left: 23px;
            h1 {
              height: 35px;
              font-size: 22px;
              font-weight: 600;
              color: #000000;
              line-height: 35px;
            }
            p {
              height: 35px;
              font-size: 18px;
              color: rgba(0, 0, 0, 0.5);
              line-height: 35px;
            }
          }
        }
      }

      .fl-left:hover,
      .fl-right:hover {
        .xi {
          p {
            width: 35px;
          }
        }
      }
      .fl-right {
        float: right;
        h3 {
          text-align: right;
        }
        p {
          img {
            transform: rotate(0) !important;
          }
        }
        > div {
          .cont {
            margin-left: 0;
            margin-right: 23px;
          }
        }
      }
    }
  }
}
</style>